<template>
    <div class="app-container">
        <!-- <sider-group :collapsible="collapsible" class="sider"> -->
        <div class="sider">
            <!-- <el-select
                size="small"
                v-model="energyType"
                @change="changeList"
                style="width: 100%; margin-bottom: 8px"
            >
                <el-option
                    v-for="item in energyTypeData"
                    :label="item.name"
                    :value="item.code"
                    :key="item.code"
                ></el-option>
            </el-select> -->
            
            <div style="flex: 1" class="bar-container">
                <BaseTree
                    :isSearch="true"
                    :data="treeData"
                    :multiple="multiple"
                    :showCheckbox="showCheckbox"
                    :expandClick="false"
                    :checkStrictly="checkStrictly"
                    @nodeClick="treeNodeClick"
                    @checkChange="treeNodeCheck"
                    :defaultProps="defaultProps"
                    :defaultExpandedkeys="defaultExpandedkeys"
                    :defaultCheckedKeys="defaultCheckedKeys"
                >
                </BaseTree>
            </div>
        <!-- </sider-group> -->
        </div>

        <div class="pa-right-part">
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane label="能耗对比" name="first">
                    <ecc
                        :selectedNodesECC="selectedNodesECC"
                        :compareType="compareType"
                        :unit="unit"
                        :energyType="energyType"
                        v-if="activeName == 'first'"
                    ></ecc>
                </el-tab-pane>
                <el-tab-pane label="同比分析" name="second">
                    <yoy
                        :selectedNodesYOY="selectedNodesYOY"
                        :compareType="compareType"
                        :unit="unit"
                        :energyType="energyType"
                        v-if="activeName == 'second'"
                    ></yoy>
                </el-tab-pane>
                <el-tab-pane label="环比分析" name="third">
                    <qoq
                        :selectedNodesQOQ="selectedNodesQOQ"
                        :compareType="compareType"
                        :unit="unit"
                        :energyType="energyType"
                        v-if="activeName == 'third'"
                    ></qoq>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import Ecc from './components/tab/eCC.vue'
    import Qoq from './components/tab/QoQ.vue'
    import Yoy from './components/tab/YoY.vue'
    import BaseTree from '@/components/BaseTree'
    import SiderGroup from '@/components/SiderGroup'
    import { findEnergySelect, findProjectSubitemTreeByEnergyType } from '@/api/common'
    import { getTreeDataExceptTopLevel } from '@/utils/common.js'
    export default {
        components: {
            Ecc,
            Qoq,
            Yoy,
            BaseTree,
            SiderGroup,
        },
        data() {
            return {
                energyTypeData: [],
                unit: '',
                // energyType: '',
                energyType: 'electricity',
                categoryType: '',
                categoryTypeData: [],
                tableData: [],
                tableLoading: false,
                checkStrictly: true,
                pageQuery: {
                    condition: {
                        id: '',
                    },
                },
                defaultProps: {
                    isLeaf: 'isLeaf',
                    children: 'children',
                    label: 'name',
                    id: 'id',
                    // disabled: function (data, node) {
                    //     //禁用父级
                    //     if (data.children && data.children.length > 0) {
                    //         return true
                    //     } else {
                    //         return false
                    //     }
                    // },
                },
                total: 0,
                currentNode: null,
                collapsible: false,
                treeData: [
                    //{ id: "0", label: "根节点", pid: "-1", children: [] }
                ],
                subTreeData: [],
                defaultExpandedkeys: [],
                defaultCheckedKeys: [],
                //表格配置
                compareType: 1,
                //树形节点点击节点id
                treeNodeId: '',
                //选中的节点数据
                treeNodeData: {},
                multiple: true,
                showCheckbox: true,
                activeName: 'first',
                isSingleSelect: false, // 初始化为多选模式
                selectedNodes: null, // 存储子组件A传递的选中的节点信息的数组
                selectedNodesECC: [], // ecc
                selectedNodesYOY: null, // yoy
                selectedNodesQOQ: [], // qoq
            }
        },
        watch: {
            collapseFlg(newVal, oldVal) {
                this.collapsible = newVal
            },
            categoryType(newVal, oldVal) {
                if (newVal) {
                    //切换第一级，获取剩余的树结构
                    this.subTreeData = getTreeDataExceptTopLevel(newVal, this.treeData)
                    //初始化选中第一项
                    if (this.subTreeData[0]) {
                        const id = this.subTreeData[0].id
                        this.expandedKey = [id]
                        this.currentSelectNode = { id }
                    }
                }
            },
        },
        computed: {
            collapseFlg() {
                return this.$store.state.collapseState
            },
        },
        created() {
            window.addEventListener('resize', this.changeTableStyle)
        },
        destroyed() {
            window.removeEventListener('resize', this.changeTableStyle)
        },
        mounted() {
            this.initData()
        },
        methods: {
            getSubItemTree() {
                findProjectSubitemTreeByEnergyType({
                    projectId: this.$store.state.projectId,
                    energyType: this.energyType,
                }).then((resp) => {
                    const { data } = resp
                    if (data && data.length) {
                        const result = data.map((item) => ({ ...item, disabled: true }))
                        this.treeData = result
                        if (result[0]) {
                            const children = result[0].children
                            const ids = children.map((item) => item.id)
                            this.defaultExpandedkeys = [result[0].id]
                            this.defaultCheckedKeys = ids
                            this.selectedNodesECC = children
                            this.selectedNodesQOQ = children
                        }

                        // defaultCheckedKeys
                        //获取树结构的第一层
                        //this.categoryTypeData = getTreeTopLevel(data)
                        //设置初始值
                        // this.categoryType = this.categoryTypeData[0]
                        //     ? this.categoryTypeData[0].code
                        //     : ''

                        //this.runBootstrap()
                    }
                })
            },
            changeList() {
                let obj = this.energyTypeData.find((item) => {
                    return item.code === this.energyType
                })
                this.unit = obj.unit
                this.getSubItemTree()
            },
            async initData() {
                // 能源类型
                const { data: energyOptions } = await findEnergySelect(this.$store.state.projectId)
                this.energyTypeData = energyOptions
                this.energyType = this.energyTypeData[0] ? this.energyTypeData[0].code : ''
                this.changeList()

                // 分项树
                this.getSubItemTree()
            },
            treeNodeCheck(checkedNodes, data, node) {
                this.selectedNodes = checkedNodes.data.checkedNodes
                switch (this.compareType) {
                    case 1:
                        this.selectedNodesECC = this.selectedNodes
                        this.selectedNodesQOQ = this.selectedNodes
                        break
                    case 2:
                        this.selectedNodesYOY = this.selectedNodes
                        break
                    case 3:
                        this.selectedNodesQOQ = this.selectedNodes
                        this.selectedNodesECC = this.selectedNodes
                        break
                }
            },
            treeNodeClick(data, node, self) {
                this.selectedNodesYOY = []
                this.selectedNodesYOY.push(data)
                this.treeNodeId = data.data.id
                this.treeNodeData = data.data
            },
            handleTabClick(tab) {
                this.isSingleSelect = tab.name === 'second'
                switch (tab.name) {
                    case 'first':
                        // this.selectedNodesECC = this.selectedNodes
                        this.compareType = 1
                        this.multiple = true
                        this.showCheckbox = true
                        break
                    case 'second':
                        // this.selectedNodesYOY = this.selectedNodes
                        this.compareType = 2
                        this.multiple = false
                        this.showCheckbox = false
                        break
                    case 'third':
                        // this.selectedNodesQOQ = this.selectedNodes
                        this.compareType = 3
                        this.multiple = true
                        this.showCheckbox = true
                        break
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .app-container {
        display: flex;
        height: 100%;
    }
    .sider {
        // background-color: $table-search-bg-color;
        // margin-right: 10px;
        margin-right: 12px;
        width: 285px;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        .bar-container {
            flex: 1;
            // height: calc(100vh - 220px);
            overflow-y: auto;
            padding: 0 10px;
            background: linear-gradient(90deg, rgba(5, 59, 128, 1), rgba(1, 22, 57, 1));
            box-shadow: 0px 4px 8px 0px rgba(0,17,46,0.5);
            border: 1px solid rgba(0, 144, 242, 0.58); 
            border-radius: 10px;
        }
    }

    .pa-right-part {
        flex: 1;
        position: relative;
    }
</style>
